<template>
<el-container>
  <el-header>
    <el-form :model="form" :inline="true">
      <el-form-item>
        <el-date-picker
          v-model="form.date"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.uid" @change="getList">
          <el-option :label="name" :value="id" :key="id" v-for="(name,id) in attendList.staff_list"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item><el-button type="primary" @click="getList">搜索</el-button></el-form-item>
    </el-form>
  </el-header>
  <el-main>
    <el-table
    :data="attendList.list"
    tooltip-effect="dark"
    style="width: 100%;"
    >
     <el-table-column label="上班时间 09:00:00">
        <el-table-column label="签到姓名" prop="username"></el-table-column>
        <el-table-column label="签到职位" prop="srole"></el-table-column>
        <el-table-column label="签到留言" prop="sdesc"></el-table-column>
        <el-table-column label="签到信息" prop="sip"></el-table-column>
        <el-table-column label="签到时间" prop="start"></el-table-column>
        <el-table-column label="签到状态" prop="state_start"></el-table-column>
     </el-table-column>

      <el-table-column label="下班时间 18:00:00">
        <el-table-column label="签退职位" prop="erole"></el-table-column>
        <el-table-column label="签退留言" prop="edesc"></el-table-column>
        <el-table-column label="签退信息" prop="eip"></el-table-column>
        <el-table-column label="签退时间" prop="stop"></el-table-column>
        <el-table-column label="签退状态" prop="state_stop"></el-table-column>
        <el-table-column label="签到日期" prop="date"></el-table-column>
      </el-table-column>
    </el-table>

    <el-footer>

      <!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="attendList.total">
      </el-pagination>

    </el-footer>

  </el-main>

</el-container>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
    export default {
        name: "attendList",//考勤数据
        data(){
            return {
                form: {
                    uid: '',
                    date: '',
                    page: 1,
                    page_size: 10,
                }
            }
        },
        computed: {
            ...mapState("AdminData",["attendList"]),
        },
        methods: {
            ...mapActions("AdminData",["getLoginListActions"]),
            getList(){
              this.getLoginListActions(this.form)
            },
            handleSizeChange(pageSize){
                this.form.page_size = pageSize
                this.getList()
            },
            handleCurrentChange(page){
                this.form.page = page
                this.getList()
            }

        },

    }
</script>

<style scoped>

</style>
